<template>
  <div class="repayment">
    <div class="repayment-title">
      <i @click="repaymentBack"></i>
      <p class>还款</p>
    </div>
    <div class="repayment-top">
      <div class="top-title">
        <span class="t-t-l">{{repayment_data.data.bills.str}}</span>
        <span class="t-t-r">
          <span v-if="repayment_data.data.bills.type == '1'">还款日：</span>
          <span v-else>账单日：</span>
          <span class="tt-rr">{{repaymentDate}}</span>
        </span>
      </div>
      <div class="repayment-state" v-if="repayment_data.data.bills.type == '1'">
        <div class="state-title">
          <span>币种账户</span>
          <span>账单总额</span>
          <span>剩余应还</span>
        </div>
        <div class="state-list">
          <div
            class="state-item"
            v-for="(item, index) in repayment_data.data.bills.list"
            :key="index"
          >
            <span>{{item.name}}</span>
            <span class="state-fontsize">{{item.amount}}</span>
            <span class="red">{{item.unpay_amount}}</span>
          </div>
        </div>
      </div>
      <div class="repayment-state unbill" v-else>
        <div class="state-title">
          <span>币种账户</span>
          <span>账单总额</span>
        </div>
        <div class="state-list">
          <div
            class="state-item"
            v-for="(item, index) in repayment_data.data.bills.list"
            :key="index"
          >
            <span>{{item.name}}</span>
            <span class="state-fontsize">{{item.amount}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="repayment-mid" @click="showRepaymentModel">
      <span>还款方式</span>
      <i></i>
      <span class="pos">{{repaymentChoose}}</span>
    </div>
    <div class="repayment-bottom">
      <div class="repayment-b-t">
        <span v-if="repayment_data.data.bills.type == '1'">还款资金扣除组合</span>
        <span v-else>自定义还款资金扣除组合</span>
        <i
          :class="{active: defaultrepaymentDeduct}"
          @click="changeDefault"
          v-if="repayment_data.data.bills.type == '1'"
        >
          <span></span>
        </i>
        <span
          class="group-title-default"
          v-if="repayment_data.data.bills.type == '1'"
        >{{defaultText}}</span>
      </div>
      <div class="repayment-group">
        <p v-if="defaultrepaymentDeduct">
          <span v-for="(item,index) in repayment_data.data.bills.groups" :key="index">
            <span v-if="index">+</span>
            {{item.amount}} {{item.currency_code}}
          </span>
        </p>
        <div class="group-list" v-else>
          <div
            class="group-item"
            v-for="(item,index) in repayment_data.data.wallet"
            :key="index"
            :data-code="item.currency_code"
          >
            <i
              :id="setAccountId(index)"
              :data-index="index"
              :data-code="item.currency_code"
              @click="chooseAccount"
            ></i>
            <div class="group-item-left">
              <p>{{item.name}}账户</p>
              <p class="group-item-tip">账户余额：{{item.amount}}</p>
            </div>
            <div class="group-item-right">
              <!-- number text-->
              <input
                :id="setDeductCashId(index)"
                type="number"
                maxlength="11"
                :max="item.amount"
                :data-index="index"
                :data-amount="item.amount"
                :data-code="item.currency_code"
                @blur="check_rep_group"
                @click="repaymentDeductCashClick"
                @keyup="repaymentInput"
                placeholder="请输入扣除金额"
              >
            </div>
          </div>
        </div>
        <div
          class="repayment-tips"
          v-if="defaultrepaymentDeduct && (repayment_data.data.bills.has_usable != '1' || repayment_data.data.bills.has_balance == '0')"
        >
          <i class="icon-tips"></i>
          <p>乐钱包账户余额不足，不足还清本月剩余账单；您可以选择"去充值"后再还款或"继续还款"。</p>
        </div>
        <div
          class="repayment-tips-bottom"
          v-if="defaultrepaymentDeduct && (repayment_data.data.bills.has_usable != '1' || repayment_data.data.bills.has_balance == '0')"
        ></div>
      </div>
    </div>
    <div
      v-if="!defaultrepaymentDeduct && okButton && repayment_data.data.bills.type == '1' && repayment_gruop.data.state == '0'"
    >
      <div class="repayment-account-tips">
        <i class="icon-tips"></i>
        <p>当前还款组合不够还清本期账单，您可调试后再试或继续还款；考虑到汇率实时变动，结果以实际为准。</p>
      </div>
    </div>
    <div class="repayment-account-tips" v-if="repayment_data.data.bills.type == '0'">
      <i class="icon-tips"></i>
      <p>当前还款将还未出账单，还款剩余金额将退回原账户，考虑到汇率实时变动，结果以实际准。</p>
    </div>
    <div
      class="repayment-button-cont"
      :class="{active: okButton}"
      v-if="defaultrepaymentDeduct && repayment_data.data.bills.type == '1' && (repayment_data.data.bills.has_usable != '1' || repayment_data.data.bills.has_balance == '0')"
    >
      <button type="button" class="btn-default" @click="recharge">去充值</button>
      <button type="button" class="btn-primary" @click="nextStep">
        <span>继续还款</span>
      </button>
    </div>
    <div class="repayment-button-cont" v-else>
      <div class="repayment-button" :class="{active: okButton}" @click="nextStep">
        <button type="button" class="btn-primary">
          <span>确认还款</span>
        </button>
      </div>
    </div>

    <!-- <repayment-choose-model></repayment-choose-model> -->
  </div>
</template>

<script>
// import repaymentChooseModel from "~/components/repaymentChooseModel.vue";

export default {
  components: {
    // repaymentChooseModel
  },
  data: function() {
    return {
      okButton: true,
      defaultrepaymentDeduct: true,
      repaymentChoose: "乐钱包",
      //自定义还款组合是否够还款
      current_repayment_group: {
        code: 0,
        msg: "OK",
        data: {
          state: "1"
        }
      },
      current_repayment_data: null,
      temp_amount: "",
      group: []
    };
  },
  computed: {
    currency_code() {
      this.$store.state.wealthLeShell.currency_code;
    },
    repayment_gruop() {
      return (
        this.current_repayment_group ||
        this.$store.state.wealthLeShell.repayment_gruop
      );
    },
    repayment_data() {
      return (
        this.current_repayment_data ||
        this.$store.state.wealthLeShell.repayment_data
      );
    },
    bill_guess_params() {
      return this.$store.state.wealthLeShellBill.bill_guess_params;
    },
    unbill_guess_params() {
      return this.$store.state.wealthLeShellBill.unbill_guess_params;
    },
    repaymentDate() {
      // this.repayment_data.data.bills.month
      // this.repayment_data.data.bills.has_due
      let type = this.repayment_data.data.bills.type;
      let _title =
        type == "1"
          ? this.bill_guess_params.end_day
          : this.unbill_guess_params.start_day;
      let arr = _title.split(".");
      return (_title = arr[0] + "-" + arr[1]);
    },
    defaultText() {
      return this.defaultrepaymentDeduct ? "默认" : "自定义";
    }
  },
  mounted() {
    // return; //test
    let that = this;
    (async () => {
      await this.get_repayment_data();
    })();
    this.$nextTick(() => {
      // this.$refs.scroll.$emit("pulling");
    });
  },
  methods: {
    async get_repayment_data() {
      // return; //test
      let { data: rs } = await this.$axios.post(
        "?ct=api&ac=get_repayment_data"
      );
      this.current_repayment_data = rs;
      this.$store.commit("wealthLeShell/SET_repayment_data", rs);
      if (rs.code == 0) {
        this.groupData();
        if (rs.data.bills.type == "0") {
          this.changeDefault();
        }
        // if (!Array.isArray(data) || data.length < 1) {
        //   this.$toast(rs.msg);
        //   return;
        // }
      } else {
        this.$toast(rs.msg);
      }
    },
    async check_repayment_group() {
      // return; //test
      console.log("check_repayment_group");
      let str = JSON.stringify(this.group);
      let { data: rs } = await this.$axios.post(
        "?ct=api&ac=check_repayment_group",
        { group: str }
      );
      console.log(rs);
      this.current_repayment_group = rs;

      if (rs.code == 0) {
        if (rs.data.state) {
        }
        let _garr = JSON.parse(JSON.stringify(this.group));
        this.$store.commit("wealthLeShell/SET_repayment_data_groups", _garr);
      } else {
        this.$toast(rs.msg);
      }
    },

    setAccountId(index) {
      return "account" + index;
    },
    setDeductCashId(index) {
      return "repaymentDeductCash" + index;
    },
    chooseAccount(e) {
      let _show = e.target.className === "active";
      e.target.className = _show ? "" : "active";
      if (_show) {
        let index = e.target.getAttribute("data-index");
        let code = e.target.getAttribute("data-code");
        document.getElementById("repaymentDeductCash" + index).value = "";
        this.group.forEach((currentValue, index, array) => {
          if (code == currentValue.currency) {
            array.splice(index, 1);
            return;
          }
        });
        if (this.group.length < 1) {
          this.okButton = false;
        }
      }
    },
    repaymentDeductCashClick(e) {
      let index = e.target.getAttribute("data-index");
      let ele = document.getElementById("account" + index);
      if (ele.className === "") {
        ele.className = "active";
      }
    },
    groupData() {
      this.group = [];
      this.repayment_data.data.bills.groups.forEach(element => {
        // 资金组合 如：[{“currency”:”CNY”,”amount”:”22”},{“currency”:”USD”,”amount”:”22”}]
        let obj = { amount: element.amount, currency: element.currency_code };
        this.group.push(obj);
      });
    },
    changeDefault() {
      if (!this.defaultrepaymentDeduct) {
        this.okButton = true;
        this.groupData();
      } else {
        this.group = [];
        this.okButton = false;
      }
      this.defaultrepaymentDeduct = !this.defaultrepaymentDeduct;
    },
    showRepaymentModel() {
      // this.$store.commit("wealth/SET_isShowrepaymentChooseModel", true);
    },
    repaymentInput(e) {
      let value = e.target.value;
      let id = e.target.id;
      let code = e.target.getAttribute("data-code");
      let amount = e.target.getAttribute("data-amount");
      amount = Number(amount);
      value = this.clearNoNum(value);
      if (value == "" || value <= amount) {
        this.temp_amount = value;
        e.target.value = value;
        let has = false;
        this.group.forEach((currentValue, index, array) => {
          if (code == currentValue.currency) {
            has = true;
            if (value.length <= 0 || value <= 0) {
              array.splice(index, 1);
            } else {
              array[index].amount = value;
            }
            return;
          }
        });
        if (!has && value > 0) {
          // 资金组合 如：[{“currency”:”CNY”,”amount”:”22”},{“currency”:”USD”,”amount”:”22”}]
          let obj = { amount: value, currency: code };
          this.group.push(obj);
        }
        if (this.group.length < 1) {
          this.okButton = false;
        } else {
          this.okButton = true;
          this.check_repayment_group();
        }
      } else {
        e.target.value = this.temp_amount;
      }
    },
    clearNoNum(value) {
      //修复第一个字符是小数点 的情况.
      if (value != "" && value.substr(0, 1) == ".") {
        value = "";
      }
      value = value.replace(/^0*(0\.|[1-9])/, "$1"); //解决 粘贴不生效
      value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      value = value
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (value.indexOf(".") < 0 && value != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (value.substr(0, 1) == "0" && value.length == 2) {
          value = value.substr(1, value.length);
        }
      }
      return value;
    },
    repaymentBack() {
      this.$router.go(-1);
    },
    recharge() {
      this.$router.push({
        path: "/wealth/recharge",
        query: { code: this.currency_code }
      });
    },
    check_rep_group() {
      // this.check_repayment_group(); //test
    },
    nextStep() {
      if (!this.okButton) return;
      this.$router.push({
        path: "/WealthLeShellRepaymentConfirm",
        query: { cash: this.group }
      });
    }
  }
};
</script>

<style scoped>
.repayment {
  overflow: hidden;
}
.repayment-title {
  font-family: "PingFangSC-Medium";
  font-size: 36px;
  color: rgb(41, 41, 41);
  background-color: #fff;
}
.repayment-title i {
  margin-left: 30px;
  margin-top: 25px;
  position: absolute;
  width: 21px;
  height: 38px;
  background: url("~assets/img/black_blue@2x.png") no-repeat;
  background-size: 21px 38px;
}
.repayment-title p {
  line-height: 88px;
  text-align: center;
}

.repayment-top {
  margin-top: 20px;
  margin-left: 30px;
  width: 690px;
  background-color: #fff;
  border-radius: 8px;
}
.top-title {
  line-height: 88px;
  border-bottom: 2px solid #ededf0;
}
.top-title .t-t-l {
  margin-left: 30px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Medium";
  font-size: 32px;
}
.top-title .t-t-r {
  float: right;
  margin-right: 30px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.top-title .tt-rr {
  color: rgb(41, 41, 41);
  font-family: "SFUIDisplay-Medium";
}

.repayment-state {
}
.state-title {
  display: flex;
  margin-top: 28px;
  margin-left: 30px;
}
.state-title span {
  /* flex-grow: 1; */
  width: 33%;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.state-list {
}
.state-item {
  display: flex;
  margin-top: 26px;
  margin-left: 30px;
}
.state-item:first-child {
  margin-top: 30px;
}
.state-item:last-child {
  padding-bottom: 40px;
}
.state-item span {
  /* flex-grow: 1; */
  width: 33%;
  font-size: 30px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Regular";
}
.state-item .state-fontsize {
  font-family: "SFUIDisplay-Medium";
}
.state-item .red {
  color: #f05521;
  font-family: "SFUIDisplay-Medium";
}
.repayment-state.unbill {
}
.unbill .state-title {
  display: flex;
  margin-top: 28px;
  margin-left: 30px;
}
.unbill .state-title span {
  /* flex-grow: 1; */
  width: 50%;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(153, 153, 153);
}
.unbill .state-list {
}
.unbill .state-item {
  display: flex;
  margin-top: 26px;
  margin-left: 30px;
}
.unbill .state-item:first-child {
  margin-top: 30px;
}
.unbill .state-item:last-child {
  padding-bottom: 40px;
}
.unbill .state-item span {
  /* flex-grow: 1; */
  width: 50%;
  font-size: 30px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Regular";
}
.unbill .state-item .state-fontsize {
  font-family: "SFUIDisplay-Medium";
}
.unbill .state-item .red {
  color: #f05521;
  font-family: "SFUIDisplay-Medium";
}

.repayment-mid {
  margin-top: 20px;
  font-size: 32px;
  line-height: 96px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Regular";
  background-color: #fff;
}
.repayment-mid span {
  margin-left: 30px;
}
.repayment-mid i {
  display: none;
  float: right;
  margin-top: 38px;
  margin-right: 30px;
  width: 10px;
  height: 18px;
  background: url("~assets/img/jiantou_right@2x.png") no-repeat;
  background-size: 10px 18px;
}
.repayment-mid .pos {
  float: right;
  margin-right: 30px;
  font-size: 30px;
}

.repayment-bottom {
  margin-top: 20px;
  background-color: #fff;
}
.repayment-bottom .repayment-b-t {
  font-size: 32px;
  line-height: 96px;
  color: rgb(41, 41, 41);
  font-family: "PingFangSC-Regular";
  border-bottom: 2px solid #ededf0;
}
.repayment-b-t span {
  margin-left: 30px;
}
.repayment-b-t i {
  float: right;
  display: block;
  margin-right: 30px;
  margin-top: 18px;
  width: 100px;
  height: 60px;
  background-color: #2086f9;
  border-radius: 60px;
}
.repayment-b-t i span {
  position: absolute;
  display: block;
  margin-left: 42px;
  margin-top: 2px;
  width: 56px;
  height: 56px;
  background-color: #fff;
  border-radius: 56px;
}
.repayment-b-t i.active {
  background-color: #c0c3cc;
}
.repayment-b-t i.active span {
  margin-left: 2px;
}
.repayment-b-t .group-title-default {
  float: right;
  margin-left: 0;
  margin-right: 10px;
  font-size: 30px;
}

.repayment-group {
  background-color: #fff;
}
.repayment-group p {
  line-height: 96px;
  margin-left: 30px;
  font-size: 32px;
  color: #666;
  font-family: "SFUIDisplay-Medium";
}
.group-list {
}
.group-item {
  /* height: 126px; */
  margin-left: 30px;
  border-bottom: 2px solid #ededf0;
}
.group-item:last-child {
  border-bottom: 0;
}
.group-item i {
  float: left;
  margin-top: 43px;
  height: 40px;
  width: 40px;
  background: url("~assets/img/fuxuankuang2_unsel@2x.png") no-repeat;
  background-size: 40px 40px;
}
.group-item i.active {
  background: url("~assets/img/fuxuankuang2_sel@2x.png") no-repeat;
  background-size: 40px 40px;
}
.group-item-left {
  display: inline-block;
  color: rgb(41, 41, 41);
  line-height: 32px;
  font-size: 32px;
  font-family: "PingFangSC-Regular";
}
.group-item-left p {
  margin-left: 30px;
  margin-top: 28px;
  line-height: 32px;
}
.group-item-left .group-item-tip {
  margin-top: 16px;
  line-height: 24px;
  color: rgb(153, 153, 153);
  font-size: 24px;
  margin-bottom: 28px;
}
.group-item-right {
  float: right;
  margin-top: 41px;
  margin-right: 30px;
  color: rgb(41, 41, 41);
  font-size: 30px;
  font-family: "SFUIDisplay-Regular";
}
.group-item-right input {
  text-align: right;
  font-size: 30px;
}

.repayment-tips,
.repayment-account-tips {
  width: 690px;
  margin-left: 30px;
  border-radius: 8px;
  background-color: #fcf8eb;
}
.repayment-tips {
  margin-top: 0px;
}
.repayment-tips-bottom {
  height: 30px;
}
.repayment-account-tips {
  margin-top: 20px;
}
.repayment-tips i,
.repayment-account-tips i {
  float: left;
  margin-left: 20px;
  margin-top: 44px;
  width: 26px;
  height: 26px;
  background: url("~assets/img/cuowufuhao@2x.png") no-repeat;
  background-size: 26px 26px;
}
.repayment-tips p,
.repayment-account-tips p {
  /* float: right; */
  margin-left: 68px;
  line-height: 36px;
  padding-top: 26px;
  padding-bottom: 26px;
  font-family: "PingFangSC-Regular";
  font-size: 24px;
  color: rgb(211, 155, 0);
}

.repayment-button-cont {
  margin-top: 60px;
}
.repayment-button-cont .btn-default {
  float: left;
  margin-left: 30px;
  width: 330px;
  height: 86px;
  line-height: 86px;
  text-align: center;
  font-family: "PingFangSC-Regular";
  font-size: 36px;
  background-color: #fff;
  color: rgb(102, 102, 102);
  border: 2px solid #ededf0;
  border-radius: 4px;
  /* border: none; */
}
.repayment-button-cont .btn-primary {
  float: left;
  opacity: 0.7;
  margin-left: 30px;
  width: 330px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  background-color: rgb(32, 134, 249);
  border-radius: 4px;
  border: none;
}
.repayment-button-cont.active .btn-primary {
  opacity: 1;
}
.repayment-button-cont span {
  opacity: 0.5;
  width: 100%;
  margin-top: -62px;
  font-family: "PingFangSC-Regular";
  font-size: 36px;
  color: #fff;
}
.repayment-button-cont.active span {
  opacity: 1;
}
.repayment-button {
  margin-top: 60px;
}
.repayment-button .btn-primary {
  display: block;
  opacity: 0.7;
  margin-left: 30px;
  width: 690px;
  height: 88px;
  background-color: rgb(32, 134, 249);
  border-radius: 8px;
  border: none;
}
.repayment-button.active {
}
.repayment-button.active .btn-primary {
  opacity: 1;
}
.repayment-button span {
  opacity: 0.5;
  width: 100%;
  margin-top: -62px;
  text-align: center;
  font-family: "PingFangSC-Regular";
  font-size: 36px;
  color: #fff;
}
.repayment-button.active span {
  opacity: 1;
}
</style>
